<template>
	<uv-navbar title="语法句子" auto-back placeholder />
  <div class="proofread-list-wrap list-colum-width">
    <div
        class="proofread-item list-colum-width"
        v-for="item in renderData"
        @click="itemClickHandle(item)"
        :key="item.id"
    >
      <div>
        <p
            class="main-grammar"
            :class="{
            'grammar-hidden': item.clickNum >= 1 && item.clickNum % 2 === 1,
          }"
        >
          <span>{{ item.word }}</span>
          <img class="play-btn" src="https://online-edu-test.mfy777.com/img/audio-play.png" alt="" />
        </p>
        <p
            class="main-grammar"
            :class="{ 'grammar-hidden': item.clickNum === 0 }"
        >
          {{ item.translation }}
        </p>
      </div>
    </div>
    <div class="list-colum-width"></div>
    <div class="list-colum-width"></div>
  </div>
</template>

<script>
import {grammarCourseDay} from "@/common/apis/grammar";

export default {
	data () {
		return {
      renderData: '',
      clickNum: '',
		}
	},
	
	onLoad({ id }) {
    this.getData(id)
	},
	methods: {
    async getData(id){
      await grammarCourseDay({id:id}).then((res)=>{
        this.renderData = res.map((v) => ({
          ...v,
          clickNum: 0
        }));
        console.log(this.renderData)
      })
      console.log(123123)
    },
    mounted() {
      // const closelastPlay = () => {
      //   datalist.value[playWordIndex.value].play = false;
      // };
      // uni.useAudio.onEnded(closelastPlay);
    },
    itemClickHandle(item){
      let n = item.clickNum ? item.clickNum + 1 : 1;
      // this.$set(item, "clickNum", n);
      if (item.voiceFile) {
        uni.useAudio.src('https://yypx-1331574292.cos.ap-beijing.myqcloud.com/'+item.voiceFile)
        // this.audio.addEventListener('canplay',()=>{
        //   this.audio.play();
        // })
      }
    }
	}
}
</script>
<style >

.proofread-list-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  margin-top: 30rpx;
}
.proofread-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  text-align: left;
  margin-bottom: 20rpx;
  font-size: 35rpx;
  width: 95%;
  transition: box-shadow 0.3s;
}
.proofread-item:hover{
  box-shadow: 0 0 10px rgba(39, 191, 163, 0.5);
}

.play-btn{
  width: 40rpx;
  height: 40rpx;
}
</style>